<template>
    <div class="login-page">
        <div class="bg">
            <video src="../../assets/bg.mp4" muted="muted" loop="loop" autoplay="autoplay" class="video"></video>
        </div>
        <div class="login-container">  
            <h1 class="title">{{pageInfo.title}}</h1>  
            <!-- 动态组件 -->
            <component :is="pageInfo.component"></component>
            <div class="toggle">
                <!-- 引入阿里图标 -->
                <svg class="icon" aria-hidden="true">
                    <use :xlink:href="icon"></use>
                </svg>
                <button @click="handleToggle">{{pageInfo.toggleRes}}</button>
            </div>          
        </div> 
    </div>
  </template>
<script setup>
import commonLogin from '../../components/login/commonLogin.vue';
import smsLogin from "../../components/login/smsLogin.vue"
import {ref,watchEffect,markRaw,computed} from "vue"

// markRaw可以将响应式的ref变成常规对象

// 声明一个页面数据
let pageInfo = ref({
    title:"千锋管理系统",//标题
    loginType:'comm',//登入类型 commonLogin/smsLogin//登入类型 commonLogin/smsLogin
    toggleRes:"切换登录",//切换的描述信息
    component:markRaw(smsLogin)//要切换的组件
})

// 用于标记是否常规登录
let isCommonLogin = ref(true);
// 点击切换登录方式
let handleToggle =function(){
    isCommonLogin.value = !isCommonLogin.value
}
//通过结合高级侦听器和vue3的动态组件来实现组件切换
// vue3的动态组件，通过:is结合component 这个组件来实现动态切换
watchEffect(()=>{
    // 常规登录
    if(isCommonLogin.value){
        pageInfo.value={
            title:"千锋管理系统",//标题
            loginType:'commonLogin',//登入类型 commonLogin/smsLogin
            toggleRes:"切换短信登录",//切换的描述信息
            component:markRaw(commonLogin)//要切换的组件
        }
    }else{
        // 手机短信登录
        pageInfo.value={
            title:"短信登录",//标题
            loginType:'smsLogin',//登入类型 commonLogin/smsLogin
            toggleRes:"切换用户名/密码登录",//切换的描述信息
            component:markRaw(smsLogin)//要切换的组件
        }
    }
})
// 根据登录模式的切换，派发图标的名称
let icon = computed(()=>{
    return isCommonLogin.value ? '#icon-iphone' : '#icon-icon-test'
})
</script>
<style lang="less" scoped>
  //定制组件，修改样式的思路：
  // 1.找到对应组件结构的类名
  // 2.重新编写样式，覆盖原来的样式
  
  // 样式修改不成功的因素和解决方案
  // 1.确定类名是否成功
  // 2.确认权重是否足够 ！important
  // 3.是否需要使用深度选择器 xx :deep(选择器) scoped样式，层级嵌套比较深的时候
    // :deep(.el-input){
    //     width:200px !important;
    //  }
.login-page {
    text-align: center;
    height: 100%;
    .bg{
        video {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
        }
    }
    .login-container{
        position: fixed;
        right: 10%;
        top: 25%;
        border-radius: 5px;
        width: 400px;
        background-color: rgba(57, 101, 181, 0.3);
        padding: 100px 0 50px 0;
        .title{
            margin: 0 0 60px 0;
            text-align: center;
            color: #fff;
        }  
        .icon{
            width: 2em;
            height:2em;
            vertical-align: middle;
        }
        button{
            background: none;
            border: none;
            text-decoration: underline;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
        }      
    }
  }
  
</style>
    